<template>
  <div class="experience-editor-form">
    <h3 class="section-title">工作经验</h3>
    
    <div class="editor-container">
      <el-form-item label="工作经验描述" prop="experience">
        <div class="rich-editor">
          <div class="editor-toolbar">
            <el-button-group>
              <el-button size="small" @click="formatText('bold')" title="粗体">
                <el-icon><Document /></el-icon>
              </el-button>
              <el-button size="small" @click="formatText('italic')" title="斜体">
                <el-icon><Edit /></el-icon>
              </el-button>
              <el-button size="small" @click="formatText('underline')" title="下划线">
                <el-icon><List /></el-icon>
              </el-button>
            </el-button-group>
            
            <el-divider direction="vertical" />
            
            <el-button-group>
              <el-button size="small" @click="insertList('ul')" title="无序列表">
                <el-icon><List /></el-icon>
              </el-button>
              <el-button size="small" @click="insertList('ol')" title="有序列表">
                <el-icon><Collection /></el-icon>
              </el-button>
            </el-button-group>
            
            <el-divider direction="vertical" />
            
            <el-button size="small" @click="clearFormat" title="清除格式">
              <el-icon><Delete /></el-icon>
              清除格式
            </el-button>
          </div>
          
          <div
            ref="editorContent"
            class="editor-content"
            contenteditable="true"
            @input="handleInput"
            @paste="handlePaste"
            placeholder="请详细描述您的工作经验、项目经历、成就等..."
          ></div>
          
          <div class="editor-footer">
            <span class="char-count">{{ charCount }} 字符</span>
            <span class="word-count">{{ wordCount }} 词</span>
          </div>
        </div>
      </el-form-item>
    </div>
    
    <div class="experience-tips">
      <el-alert
        title="写作建议"
        type="info"
        :closable="false"
        show-icon
      >
        <template #default>
          <ul class="tips-list">
            <li>详细描述您的工作职责和成就</li>
            <li>使用具体的数据和成果来展示您的能力</li>
            <li>突出与目标职位相关的技能和经验</li>
            <li>保持条理清晰，使用项目符号或编号列表</li>
            <li>建议字数在500-1000字之间</li>
          </ul>
        </template>
      </el-alert>
    </div>
  </div>
</template>

<script>
import { 
  Document, 
  Edit, 
  Delete, 
  List, 
  Collection 
} from '@element-plus/icons-vue'

export default {
  name: 'ExperienceEditor',
  components: { 
    Document, 
    Edit, 
    Delete, 
    List, 
    Collection 
  },
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      content: this.modelValue,
      charCount: 0,
      wordCount: 0
    }
  },
  watch: {
    modelValue(newVal) {
      this.content = newVal
      this.updateContent()
    }
  },
  mounted() {
    this.updateContent()
  },
  methods: {
    handleInput() {
      const content = this.$refs.editorContent.innerHTML
      this.content = content
      this.$emit('update:modelValue', content)
      this.updateCounts()
    },
    
    handlePaste(e) {
      e.preventDefault()
      const text = e.clipboardData.getData('text/plain')
      document.execCommand('insertText', false, text)
    },
    
    formatText(command) {
      document.execCommand(command, false, null)
      this.$refs.editorContent.focus()
    },
    
    insertList(type) {
      document.execCommand('insertUnorderedList', false, null)
      this.$refs.editorContent.focus()
    },
    
    clearFormat() {
      document.execCommand('removeFormat', false, null)
      this.$refs.editorContent.focus()
    },
    
    updateContent() {
      if (this.$refs.editorContent) {
        this.$refs.editorContent.innerHTML = this.content
        this.updateCounts()
      }
    },
    
    updateCounts() {
      const text = this.$refs.editorContent.textContent || ''
      this.charCount = text.length
      this.wordCount = text.trim() ? text.trim().split(/\s+/).length : 0
    }
  }
}
</script>

<style scoped>
.experience-editor-form {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #409eff;
}

.editor-container {
  margin-bottom: 16px;
}

.rich-editor {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.editor-toolbar {
  background: #f5f7fa;
  padding: 8px 12px;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.editor-content {
  min-height: 200px;
  padding: 16px;
  outline: none;
  font-size: 14px;
  line-height: 1.6;
  color: #303133;
  background: white;
}

.editor-content:empty:before {
  content: attr(placeholder);
  color: #c0c4cc;
  pointer-events: none;
}

.editor-content:focus {
  border-color: #409eff;
}

.editor-footer {
  background: #f5f7fa;
  padding: 8px 16px;
  border-top: 1px solid #dcdfe6;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.char-count, .word-count {
  font-weight: 500;
}

.experience-tips {
  margin-top: 16px;
}

.tips-list {
  margin: 8px 0 0 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
}

.tips-list li {
  margin-bottom: 4px;
}
</style> 